<template>
  <div id="video">
    <Tabs :tabList="tabList" @target="target" />
    <!-- 路由入口 -->
    <transition name="el-fade-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import Tabs from '@/components/Content/Tabs';

export default {
  name: 'video',

  components: {
    Tabs
  },

  data() {
    return {
      tabList: [{
        tabName: '视频',
        isActive: true,
        id: 'subvideo'
      }, {
        tabName: 'MV',
        isActive: false,
        id: 'submv'
      }],
    };
  },

  watch: {
    '$route.name': {
      // 回退或前进按钮需要tab进行记忆操作
      handler(value) {
        this.selectTab(value);
      },
      immediate: true
    }
  },

  mounted() {
    
  },

  methods: {
    target(name) {
      this.$router.push({
        name
      })
    },
    selectTab(rn) {
      console.log(rn)
      this.tabList.map(item => item.isActive = false);
      this.tabList.find(item => item.id === rn).isActive = true;
    }
  },
};
</script>

<style lang="less" scoped>
#video {
  height: 100%;
}
</style>